<template>
  <!-- <div class="animated fadeIn"> -->
    <el-card >
  <div slot="header" class="clearfix">
    <!-- <span>类名</span> -->
    <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
    <el-row :gutter="20" >
  <el-col>
        <Form  :model="fruits"  :label-width="10" inline>
        <Form-item  prop="fruitsNames">
            <el-input clearable v-model="fruitsNames"  placeholder="请输入水果名称"></el-input>
        </Form-item>
        <!-- <Form-item prop="company">
            <Input v-model="company" placeholder="请输入公司"></Input>
        </Form-item>
        <Form-item prop="fruitsMount">
            <Input v-model="fruitsMount" placeholder="请输入数量"></Input>
        </Form-item> -->
        <Form-item >
            <Button type="primary" shape="circle"  @click="searchVal" icon="ios-search">搜索</Button>
            <!-- <Button type="primary" shape="circle" @click="reset" >重置 </Button> -->
        </Form-item>
    </Form>  
    </el-col>
    </el-row>
    </div>
    <Button type="primary" class="btn" @click="drawer1">添加</Button> 
  <template>
    <Table border :context="self" :columns="columns" :data="data"></Table>
</template>
<el-drawer
  title="'我是标题'"
  :visible.sync="drawer"
  :show-close="true"
  close-on-press-escape
  :with-header="false">
  <br>
  <h6>{{operateType}}</h6> <br>  
        <Form  :model="fruits"  :label-width="10" >
        <Form-item  prop="fruitsNames">
            <Input v-model="fruits.fruitsNames" placeholder="请输入水果名称"></Input>
        </Form-item>
        <Form-item prop="company">
            <Input v-model="fruits.company" placeholder="请输入公司"></Input>
        </Form-item>
        <Form-item prop="company">
            <Input v-model="fruits.fruitsPrice" placeholder="请输入单价"></Input>
        </Form-item>
        <Form-item prop="company">
            <Input v-model="fruits.fruitsUnit" placeholder="请输入单位"></Input>
        </Form-item>
        <Form-item prop="company">
            <Input v-model="fruits.fruitsMount" placeholder="请输入数量"></Input>
        </Form-item>
        <br>
            <Button type="primary" v-if="operateType == '添加水果'" @click="btnSave" >确定</Button>
            <Button type="primary" v-else @click="btnEditSave" >确定</Button>
            <Button type="primary" @click="btnCancle" >取消</Button>
    </Form>  
</el-drawer>
</el-card>     
</template>

<script>

export default {
    name: 'Fruits',
    data () {
      return {
        fruitsVal:{},
        fruitsNames: '',
        company: '',
        fruitsMount:'',
        operateType: '', //标题状态
        drawer: false, //弹层
        fruits: { //表单
          fruitsNames: '',
          company: '',
          fruitsPrice: '',
          fruitsUnit: '',
          fruitsMount: ''
        },
            self: this,
            columns: [
                {
                    title: '水果名称',
                    key: 'fruitsNames',
                    render: (h, params) => {
                        return h('div', {}, _.get(params.row, 'fruitsNames'))
                    }
                },
                {
                    title: '水果单价',
                    key: 'fruitsPrice'
                },
                {
                    title: '公司地址',
                    key: 'company'
                },
                {
                    title: '单位',
                    key:'fruitsUnit'
                },
                {
                    title: '数量',
                    key:'fruitsMount'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return [
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        margin: 'margin',
                                        opcode: 'edit'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row, 'edit')
                                        }
                                    }
                                },
                                '编辑'
                            ),
                            h(
                              'Button',
                              {
                                props: {
                                  type: 'error',
                                  margin: 'margin',
                                  opcode: 'del'
                                },
                                on: {
                                  click: () => {
                                    this.delRow(params.row)
                                  }
                                }
                              },
                              '删除'
                            )
                        ]
          }
                }
            ],
            data: [
                {
                    id:111,
                    fruitsNames: '苹果',
                    fruitsPrice: 18,
                    fruitsUnit:'kg',
                    company: '北京市朝阳区芍药居',
                    fruitsMount:10
                },
                {
                    id:222,
                    fruitsNames: '香蕉',
                    fruitsPrice: 25,
                    fruitsUnit:'斤',
                    company: '北京市海淀区西二旗',
                    fruitsMount:12
                },
                {
                    id:333,
                    fruitsNames: '橘子',
                    fruitsPrice: 30,
                    fruitsUnit:'kg',
                    company: '上海市浦东新区世纪大道',
                    fruitsMount:4
                },
                {
                    id:434,
                    fruitsNames: '菠萝',
                    fruitsPrice: 26,
                    fruitsUnit:'kg',
                    company: '深圳市南山区深南大道',
                    fruitsMount:7
                }
            ]
        }
    },
    methods: {    
 delRow (data) { //删除
     console.log(data);
      this.$Modal.confirm({
        title: '批量删除',
        content: '<p>确定“删除”当前记录吗？</p>',
        onOk: () => {
            // console.log(this.column);
            // console.log(  this.data6.splice(data.id, 1));
            
            this.data.splice(data._index, 1);
            console.log(this.data);
        },
        onCancel: () => {}
      })
      },
      btnSave () {  //保存
    if (this.operateType == '添加水果') {
      this.data.push(this.fruits) //往data里面添加数据
      this.local(this.data)
    } else {
      this.btnCancle()
    }
      this.btnCancle() // 关闭弹窗
      },
      btnCancle () { //关闭弹窗
      this.drawer = false
      this.fruits= { //清除表单数据
                fruitsNames: '',
                company: '',
                fruitsPrice: '',
                fruitsUnit: '',
                fruitsMount: ''
            }
      },
      edit (val) {
        this.fruitsVal = val
        this.operateType = '编辑水果'
        this.drawer= true
        this.fruits = {
          fruitsNames: val.fruitsNames,
          company: val.company,
          fruitsPrice: val.fruitsPrice,
          fruitsUnit: val.fruitsUnit,
          fruitsMount: val.fruitsMount
        }
      },
      btnEditSave () {//编辑 确定
        Object.assign(this.fruitsVal, this.fruits)
        console.log(this.data);
        // this.local(this.data)
        this.drawer = false
      },
      drawer1 () { //打开弹层
        this.operateType = '添加水果'
        this.drawer = true
      },
      searchVal () {
        this.data = this.data.filter((item => {
          if (item.fruitsNames.indexOf(this.fruitsNames) !== -1) {
          return this.fruitsNames
          }  
        }
        
        ))
      },
      reset () {
        this.fruitsNames = ''
        // this.company = ''
      },
      local (v) {
        localStorage.setItem('data',JSON.stringify(v))
      },
      getLocal () {
        this.data = JSON.parse(localStorage.getItem('data'))
      }
  },
  created () {
      this.getLocal()

    }
}


</script>


<style scoped lang="scss">
.btn {
  margin-bottom: 10px;
}
.el-form--inline .el-form-item {
    display: inline-block;
    margin-right: 69px !important;
    vertical-align: top;
}
// .box-card[data-v-7d6f0da8] {
    // width: 100% !important;
// }
.box-card[data-v-1bf74c04] {
    width: 100%;
}
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
   .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
//   .bg-purple-dark {
//     background: #99a9bf;
//   }
//   .bg-purple {
//     background: #d3dce6;
//   }
//   .bg-purple-light {
//     background: #e5e9f2;
//   }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
//   .row-bg {
//     padding: 10px 0;
//     background-color: #f9fafc;
//   }
</style>
